
import { Tabs, Grid, Button, Tag, Switch, Empty } from 'antd-mobile'
import React, { useEffect, useRef, useState } from 'react'
//商户的主页面
import "@/css/vender/homeIndex.css"
import "@/css/index.css"
import { useLocation, useParams } from 'react-router-dom'


// const 

//商品上架情况
const ViewShop = () => {
  const params = useParams();
  //控制状态 根据状态显示上架/未上架商品(1/0)
  const [isShow, setShow] = useState(() => {
    return params.status
  });

  //开关改变事件
  const statusChange = () => {
    if (isShow == 0) {
      setShow(1);
    } else {
      setShow(0);
    }
  }

  return (
    <>
      <div className='shop-status'>
        <div className='shop-status-left'>
          {isShow == 1 ? <Tag color='success'>已上架商品</Tag> : <Tag color='danger'>未上架商品</Tag>}
        </div>
        <div className='shop-status-right'>
          {isShow == 1 ? <Switch onChange={statusChange} defaultChecked /> : <Switch onChange={statusChange} />}
        </div>
      </div>
      {isShow == 1 ? <div className="boxContainer_b">

        <div>


          <div className='shop'>
            <div className="shopList">
              <Grid columns={2} gap={4}>
                <Grid.Item>
                  <div className="shop-item">
                    <div className='shop'>
                      <img src={require(`@/assets/imgs/shop${2}.jpg`)} alt='' className='shop-img' />
                      <div className='shop-detail'>
                        <p className='shop-name'>雪山神牛</p>
                        <p className='shop-weight'>950g | +50g</p>

                        <div className='deposits'>
                          <Tag color='warning' >
                            销量:4
                          </Tag>
                          <p className='inventory'><Tag color='primary'>库存:96</Tag></p>
                        </div>
                        <div className='shop-price'>
                          <span></span><span>￥3.99</span>
                        </div>

                      </div>
                    </div>
                  </div>
                </Grid.Item>

                <Grid.Item>
                  <div className="shop-item">
                    <div className='shop'>
                      <img src={require(`@/assets/imgs/shop${2}.jpg`)} alt='' className='shop-img' />
                      <div className='shop-detail'>
                        <p className='shop-name'>雪山神牛</p>
                        <p className='shop-weight'>950g | +50g</p>

                        <div className='deposits'>
                          <Tag color='warning' >
                            销量:4
                          </Tag>
                          <p className='inventory'><Tag color='primary'>库存:96</Tag></p>
                        </div>
                        <div className='shop-price'>
                          <span></span><span>￥3.99</span>
                        </div>

                      </div>
                    </div>
                  </div>
                </Grid.Item>





              </Grid>
            </div>

          </div>



        </div>
      </div> : <div style={{ borderBottom: "1px solid #eee" }}>

        <Empty
          style={{ padding: '64px 0' }}
          imageStyle={{ width: 128 }}
          description='暂无数据'
        />

      </div>}
    </>
  )
}

export default ViewShop